<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.css" rel="stylesheet" />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <style>
    h1 {
      margin: 20px;
      text-align: center;
    }

    h4 {
      margin: 20px 0;
    }

    .card {
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div class="container">
    <h1>采购小助手</h1>
    <form>
      <div class="form-group">
        <label for="name">物资名：</label>
        <input type="text" class="form-control" id="name" />
      </div>
      <div class="form-group">
        <label for="price">单价：</label>
        <input type="number" class="form-control" id="price" />
      </div>
      <div class="form-group">
        <label for="amount">数量：</label>
        <input type="number" class="form-control" id="amount" />
      </div>
      <button type="submit" class="btn btn-primary" id="submit">记账</button>
    </form>
    <h4>历史采购</h4>
    <div class="history-list" id="history-list">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">2021年3月10日</h5>
          <p class="card-text">物资：苹果，单价：10元，数量：100个</p>
          <p class="card-text">共计1000元</p>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  $("#submit").click(function (e) {
    e.preventDefault();
    let today = new Date();
    let name = $("#name").val();
    let price = $("#price").val();
    let amount = $("#amount").val();
    //补充完成以下代码，实现card效果

    //首先使用模板字符串，将（``）作为表达式进行处理，在h5标签下用${}插入变量，获取到年月日
    //然后放两个p标签，一个插入变量，一个插入表达式，输出对应的值。
    let str = `<div class="card">  
                    <div class="card-body">
                      <h5 class="card-title">
                        ${today.getFullYear()}年${
                          today.getMonth() + 1
                        }月${today.getDate()}日  
                      </h5>
            <p class="card-text">物资：${name},单价：${price}元,数量：${amount}</p>
            <p class="card-text">共计：${price * amount}元</p>
                    </div>
                  </div>`
    $("#history-list").prepend($(str));//将新添加的内容str放到id=history-list内部的开头。
    $("form")[0].reset();//reset重置表单元素form内的默认值
  });
</script>

</html>